<template>
  <div>
    <h1>任务信息</h1>
    <el-button type="primary" @click="openAdd">添加任务</el-button>
    <el-table
      :data="specialist"
      style="width: 100%">
      <el-table-column
        prop="taskId"
        label="任务id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="taskName"
        label="任务名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="taskPeriod"
        label="计划周期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="taskDesc"
        label="计划简介"
        width="180">
      </el-table-column>
      <el-table-column
        prop="taskIntegral"
        label="积分"
        width="260">
      </el-table-column>
      <el-table-column
        label="操作"
        width="260">
        <template slot-scope="scope" >
          <el-button type="primary" @click="deltask(scope.row.taskId)">删除</el-button>
          <el-button type="primary" @click="updatetask(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="添加/修改任务"
      :visible.sync="dialogVisible"
      width="60%">
      <el-form ref="form" :model="expert" label-width="80px">
        <el-form-item label="任务名称">
          <el-input v-model="expert.taskName"></el-input>
        </el-form-item>
        <el-form-item label="计划周期">
          <el-input v-model="expert.taskPeriod"></el-input>
        </el-form-item>
        <el-form-item label="计划简介">
          <el-input v-model="expert.taskDesc"></el-input>
        </el-form-item>
        <el-form-item label="积分">
          <el-input v-model="expert.taskIntegral"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="inserttask">立即创建</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

    <div class="block">
      <el-pagination
        :current-page="pagenum"
        :page-sizes="[2,3,1]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {findtaskall,deltask,inserttask} from '@/api/task'
  export default {
    data(){
      return{
        specialist:[],
        dialogVisible:false,
        expert:{
          taskName:'',
          taskPeriod:'',
          taskDesc:'',
          taskIntegral:0
        },
          pagenum :1,
          pagesize :3,
          total :0
      }
    },
    mounted(){
      this.findtaskall();
    },
    methods: {
      updatetask(row){
        this.expert=row
        this.dialogVisible=true
      },
      inserttask(){
        console.log(this.expert);
         inserttask(this.expert).then(res=>{
         this.dialogVisible=false
         this.findtaskall()
      })
      },
      findtaskall(){
        findtaskall(this.pagenum,this.pagesize).then(res=>{
          console.log(res)
          this.specialist=res.data;
          this.total=res.total;
        })
      },
      deltask(taskId){
        deltask(taskId).then(res=>{
          alert(res.msg)
          location.reload();
        })
      },
      openAdd(){
        this.dialogVisible=true
      },
      handleSizeChange(val) {
        this.pagesize=val;
        this.findtaskall();
      },
      handleCurrentChange(val) {
        this.pagenum=val;
        this.findtaskall();
      }
    }
  }
</script>
<style>

</style>
